<!-- 步骤表单 -->
<template>
  <StepForm class="q-page-view" v-model="modelData" :sections="sections">
    <template #body-partOne>这是第一部分的自定义内容</template>
    <template #head-right-partThree>这是第三部分的Head的插槽，有prop属性：【head-right-partThree】</template>
    <template #head-right-4>这是第四部分的Head的插槽，无prop属性：【head-right-4】</template>
    <template #zdy>这是自定义的表单字段</template>
  </StepForm>
</template>
<script lang="ts" setup>
import StepForm from "@/core/components/form/StepForm.vue";
import { SectionFormItemAttrs } from "@/core/components/form/_types";

const modelData = reactive({ id: 0, nc: "这是用户昵称", zy: 0, xm: "张三", partThree: { xjd: "成都" } });
const sections: SectionFormItemAttrs[] = [
  {
    title: "第一部分",
    prop: "partOne",
    fields: [
      {
        prop: "id",
        label: "用户ID",
      },
      { prop: "nc", label: "昵称" },
      {
        prop: "zy",
        label: "职业",
        type: "select",
        attrs: {
          options: [
            { label: "职业0", value: 0 },
            { label: "职业1", value: 1 },
          ],
        },
      },
    ],
  },
  {
    title: "第二部分",
    explain: "块级设置 {readonly: true}",
    fields: [
      { prop: "xm", label: "姓名", quickAttrs: { pureText: true, explain: "字段级设置 {pureText: true}" } },
      { prop: "xb", label: "性别", required: true },
      { prop: "nl", label: "年龄" },
    ],
  },
  {
    title: "第三部分",
    explain: "块级设置 prop 属性",
    prop: "partThree",
    fields: [
      { prop: "xjd", label: "现居地", quickAttrs: { tips: "字段级的size【el-form-item】" } },
      {
        prop: "ip",
        label: "IP地址",
        quickAttrs: { tips: "控件级的size【el-input】" },
      },
    ],
  },
  {
    title: "第四部分",
    explain: "块级设置 {disabled: true}",
    fields: [
      { prop: "dh", label: "电话" },
      { prop: "ma", label: "密码" },
      {
        prop: "sfzh",
        label: "身份证号",
        attrs: { disabled: false },
        quickAttrs: { explain: "设置{disabled: false}" },
      },
      { prop: "zdy", label: "自定义", type: "slot" },
    ],
  },
];
</script>
<style lang="scss" scoped></style>
